<template>
	<div class="a-catalog">
		<div class="fixed-list">
			<q-list dense padding>
				<a-tree-expansion :data="data" group @item-selected="scrollTo" />
			</q-list>
		</div>
		<slot />
	</div>
</template>

<script>
	// import { scroll } from 'quasar'

	// const { getScrollTarget, setScrollPosition } = scroll;

	export default {
		name: 'ACatalog',
		data(){
			return {
				data:[]
			}
		},
		methods:{
			getTree(list){
				let arr = [];
				for (let k in list) {
					if(list.hasOwnProperty(k)){
						let item = list[k];
						let children = {label:item.logItemLabel, children:this.getTree(this.getChildren(item.$children))};
						arr.push(children);
					}
				}
				return arr;
			},
			getChildren(list){
				let arr = [];
				for (let k in list) {
					if(list.hasOwnProperty(k)){
						let item = list[k];
						if(item.logItemLabel){
							arr.push(item)
						}else{
							let output = this.getChildren(item.$children);
							if(output.length > 0){
								for (let sk in output){
									if(output.hasOwnProperty(sk)){
										arr.push(output[sk]);
									}
								}
							}
						}
					}
				}
				return arr;
			},
			scrollTo(item){
				console.log(item);
				// let el = this.$refs['doc-' + item][0];
				// let target = getScrollTarget(el);
				// let offset = el.offsetTop;
				// let duration = 1000;
				// setScrollPosition(target, offset, duration)
			}
		},
		mounted() {
			this.data = this.getTree(this.getChildren(this.$children));
		}
	}
</script>

<style>
	.fixed-list{
		position: fixed;
		right: 20px;
		z-index: 9999;
	}
</style>
